<template>
	<view class="create">
		<view class="formsBox">
			<uni-forms ref="form" :modelValue="formData" :label-width="100" :rules="rules">
				<view class="">用车人填写</view>
				<uni-forms-item label="用车人" name="applicant">
					<uni-easyinput disabled type="text" v-model="formData.applicant" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="用车科室" name="deptId">
					<deptSelect v-model="formData.deptId" :disabled="!!processId" />
				</uni-forms-item>
				<uni-forms-item label="科室负责人">
					<uni-easyinput disabled type="text" v-model="leaderName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="用车日期" name="startTime">
					<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="formData.startTime" return-type="timestamp" placeholder="请选择用车日期" />
				</uni-forms-item>
				<uni-forms-item label="同行人" name="companions">
					<uni-easyinput :disabled="!!processId" type="text" v-model="formData.companions" placeholder="请输入同行人" />
				</uni-forms-item>
				<uni-forms-item label="去向及事由" name="reason">
					<uni-easyinput :disabled="!!processId" type="textarea" v-model="formData.reason" placeholder="请输入去向及事由" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput :disabled="!!processId" type="text" v-model="formData.remark" placeholder="请输入备注" />
				</uni-forms-item>
				<u-divider text="分割线"></u-divider>
				<view class="">办公室填写</view>
				<uni-forms-item label="驾驶员" name="driverId">
					<uni-data-select
					    v-model="formData.driverId"
					    :localdata="driverOption"
						placeholder="请选择驾驶员"
						disabled
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="选择车辆" name="carId" disabled>
					<uni-data-select
					    v-model="formData.carId"
					    :localdata="carOption"
						placeholder="请选择选择车辆"
						disabled
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="出车时间" name="startDoTime">
					<uni-datetime-picker disabled type="datetime" v-model="formData.startDoTime" return-type="timestamp" placeholder="请选择出车时间" />
				</uni-forms-item>
				<u-divider text="分割线"></u-divider>
				<view class="">驾驶员填写</view>
				<uni-forms-item label="车况" name="carRemark">
					<uni-easyinput disabled type="text" v-model="formData.carRemark" placeholder="请输入车况" />
				</uni-forms-item>
				<uni-forms-item label="收车时间" name="endTime">
					<uni-datetime-picker disabled type="datetime" v-model="formData.endTime" return-type="timestamp" placeholder="请选择收车时间" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="buttonBox" v-if="!processId">
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import deptSelect from '@/components/user/deptSelect.vue'
	import {createOaVehicleApply} from '@/api/oa/useCar/index.js'
	import {useVacation,getOaUser} from '@/api/user/userApi.js'
	export default {
		components:{
			deptSelect,
		},
		props:{
			processId:'',
			propFromData:{}
		},
		watch:{
			propFromData(val){
				let formData = JSON.parse(JSON.stringify(val))
				// formData.type = String(formData.type)
				this.formData = formData;
				console.log(val)
				this.formData.deptId = {
					leaderUserId:this.formData.leaderId,
					name:this.formData.deptName,
					id:this.formData.deptId
				}
				this.driverOption = [
					{
						text:this.formData.driver,
						value:this.formData.driverId
					}
				]
				this.carOption = [
					{
						text:this.formData.car,
						value:this.formData.carId
					}
				]
				// this.leaderName = val.leaderName;
			},
			'formData.deptId':{
				async handler(val){
					debugger
					// 根据id获取可是负责人
					if(val.leaderUserId){
						debugger
						let info = await getOaUser(val.leaderUserId)
						this.leaderName = info.data.name;
						this.formData.leaderId = info.data.id;
					}else{
						this.leaderName = '';
					}
				}
			}
		},
		data() {
			return {
				leaderName:'',
				formData:{
					applicant:this.$store.state.user.name,
					deptId:'',
					leaderId:'',
					startTime:'',
					companions:'',
					reason:'',
					remark:'',
					driverId:'',
					carId:'',
					startDoTime:'',
					carRemark:'',
					endTime:'',
				},
				rules: {
					applicant: {
						rules: [{
							required: true,
							errorMessage: '请输入请假申请人',
						}]
					},
					deptId:{
						rules: [{
							required: true,
							errorMessage: '请选择用车科室',
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请选择用车日期',
						}]
					},
					companions: {
						rules: [{
							required: true,
							errorMessage: '请输入同行人',
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请输入去向及事由',
						}]
					},
					remark: {
						rules: [{
							required: true,
							errorMessage: '请输入备注',
						}]
					},
				},
				
				driverOption:[],
				carOption:[],
			};
		},
		methods:{
			// 点击提交
			submit(){
				uni.showLoading()
				this.$refs.form.validate().then(async res => {
					try{
						let formData = JSON.parse(JSON.stringify(this.formData));
						formData.deptId = formData.deptId.id
						let info = await createOaVehicleApply(formData);
						console.log(info)
						uni.hideLoading()
						uni.showToast({
							title:'发起成功',
							icon:'none',
							success: () => {
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/process/useCar/index'
									})
								},1500)
							}
						})
					}catch(err){
						console.log(err)
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
		},
		async onShow() {
		},
		async mounted() {
			
		}
	}
</script>

<style lang="less" scoped>
.create{
	width: 100%;
	height: auto;
	padding-top: 20rpx;
	.formsBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.uni-forms-item{
			margin-bottom: 30rpx;
		}
		.itemBox{
			.btnBoxs{
				display: flex;
				align-items: center;
			}
		}
	}
	.buttonBox{
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
}
</style>
